<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .outerDiv {
       width: 500px;
       height: 300px;
       border: 1px solid green;
       background-color: rgb(230, 224, 224);
       }
       .innerDiv{
           width: 100px;
           height: 100px;
           border: 1px solid blue;
       }
       .d1{
           background-color: greenyellow;
           /* 绝对定位，定位的是在整个页面上来看 */
           position: absolute;
           top: 100px;
           right: 100px;
       }
       .d2{
           background-color: rgb(79, 230, 124);
            /* relative相对定位，相对于原来的位置 */
            position: relative;
            top: 30px;
            left: 30px;
       }
       .d3{
           background-color: rgb(26, 165, 208);
           /* fixed相对定位，相对于浏览器窗口 */
           position: fixed;
           top: 30px;
           left: 30px;
       }
   </style>

</head>
<body>
    <div class="innerDiv d1">框1</div>
    <div class="innerDiv d2">框2</div>
    <div class="innerDiv d3">框3</div>
</body>
</html>